<script setup>
import { onMounted, ref, nextTick } from 'vue'
import { RouterLink } from 'vue-router'
import { useCategoryStore } from '@/stores/categoryStore'

// 普通ref数组存储一级分类（含二级分类数据）
const firstLevelCates = ref([])
const isLoading = ref(true)
const errorMsg = ref('')

const categoryStore = useCategoryStore()

onMounted(async () => {
  try {
    await categoryStore.getCategoryTree(0)
    // 提取一级分类数据（含children399二级分类）
    const rawData = categoryStore.categoryList || []
    const level1Data = rawData[0]?.children || []
    
    // 打印二级分类数据，验证是否存在
    console.log('一级分类及二级分类数据:', level1Data)
    level1Data.forEach((level1, idx) => {
      console.log(`第${idx+1}个一级分类的二级分类:`, level1.children || '无')
    })
    
    firstLevelCates.value = level1Data
    await nextTick() // 强制DOM更新
    isLoading.value = false
  } catch (err) {
    console.error('加载分类失败:', err)
    errorMsg.value = '加载分类数据失败，请稍后重试'
    isLoading.value = false
    firstLevelCates.value = []
  }
})
</script>

<template>
  <div class="home-category">
    <ul class="menu">
      <!-- 加载状态 -->
      <li v-if="isLoading" class="loading">分类数据加载中...</li>
      
      <!-- 错误状态 -->
      <li v-else-if="errorMsg" class="error">{{ errorMsg }}</li>
      
      <!-- 一级分类+二级分类渲染 -->
      <li 
        v-else
        v-for="(level1, level1Idx) in firstLevelCates" 
        :key="level1Idx"
        class="first-level-item"
      >
        <!-- 一级分类名称 -->
        <RouterLink to="/" class="level1-link">
          {{ level1.cateName || '未知分类' }}
        </RouterLink>
        
        <!-- 二级分类容器：仅当有二级分类时显示 -->
        <div class="level2-container" v-if="level1.children && level1.children.length">
          <RouterLink 
            v-for="(level2, level2Idx) in level1.children" 
            :key="level2Idx" 
            to="/"
            class="level2-link"
          >
            {{ level2.cateName || '未知子分类' }}
          </RouterLink>
        </div>

        <!-- 弹层（可选） -->
        <div class="layer">
          <h4>{{ level1.cateName }}推荐 <small>根据您的购买或浏览记录推荐</small></h4>
          <ul class="goods-list">
            <li class="no-goods">暂无推荐商品</li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>

<style scoped lang='scss'>
/* 基础容器样式 */
.home-category {
  width: 290px;
  height: 500px;
  background: rgba(0, 0, 0, 0.8) !important;
  position: relative;
  z-index: 9999 !important;
  overflow: hidden;
}

/* 列表容器 */
.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

/* 加载中/错误/无数据样式 */
.menu > li.loading, 
.menu > li.error, 
.menu > li.no-data {
  color: #fff !important;
  text-align: center;
  height: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* 一级分类项样式 */
.menu > li.first-level-item {
  padding: 0 20px !important; /* 左侧内边距减小，避免二级分类换行 */
  height: 55px !important;
  line-height: 55px !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
  transition: background 0.3s;
  white-space: nowrap; /* 强制一级+二级分类在同一行，不换行 */

  &:hover {
    background: #27ba9b !important;
  }
}

/* 一级分类链接样式 */
.level1-link {
  color: #fff !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  margin-right: 12px !important; /* 与二级分类拉开距离 */
}

/* 二级分类容器：确保与一级分类同行 */
.level2-container {
  display: inline-block !important;
  vertical-align: middle !important; /* 垂直居中对齐 */
}

/* 二级分类链接样式：浅灰色区分层级，hover变白色 */
.level2-link {
  color: rgba(255, 255, 255, 0.7) !important; /* 浅灰色，区分一级分类 */
  text-decoration: none !important;
  font-size: 14px !important;
  margin-right: 10px !important; /* 二级分类之间的间距 */

  &:hover {
    width: 270px;
    color: #fff !important; 
    text-decoration: underline !important;
  }
}

/* 弹层样式（可选） */
.layer {
  width: 950px;
  height: 500px;
  background: #fff;
  opacity: 0.6;
  position: absolute;
  left: 290px;
  top: 0;
  display: none;
  padding: 20px 15px;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);

  h4 {
    color: #333;
    font-size: 20px;
    margin: 0 0 20px 0;
  }

  h4 small {
    color: #999;
    font-size: 16px;
    font-weight: normal;
    margin-left: 10px;
  }

  .goods-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .no-goods {
    color: #999;
    font-size: 14px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* 鼠标悬停显示弹层 */
  .first-level-item:hover & {
    display: block;
  }
}
</style>